<%-- <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> --%>
<!DOCTYPE html>
<html>
<head>
<%-- 	<base href="<%=basePath%>"> --%>
<meta charset="UTF-8">
<title>Home</title>
<!-- 	<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css"> -->
<style>

.singleBlock{
	overflow:hidden;
	min-height:300px;
}
</style>
</head>
<body>
<!-- 	<div class="header clearfix"></div> -->
	<%@ include file="heading.jsp"%>
<!-- 	<div class="header clearfix"></div>
	<hr/> -->
	
	<div class="container">
		<div class="row row-offcanvas row-offcanvas-right">
		
			<div class="col-xs-12 col-sm-9">
				<p class="pull-right visible-xs">
					<button type="button" class="btn btn-primary btn-xs"
						data-toggle="offcanvas">Toggle nav</button>
				</p>
				<div class="jumbotron">
					<h1>Hello, world!</h1>
					<p>This is an example to show the potential of an offcanvas
						layout pattern in Bootstrap. Try some responsive-range viewport
						sizes to see it in action.</p>
				</div>

				<!-- 	<div class="header clearfix"> -->
				<!-- 	<div class="container"> -->
				<div class="row">
					<!-- <div class="well page-header">Forum</div> -->
					<c:forEach items="${modules }" var="module">
						<div class="col-xs-6 col-lg-4 singleBlock">
							<div class="meida">
								<div class="media-left">
									<a href="module/${module.moduleID }/read.do"> <img
										class="media-object" src="images/example.png" />
									</a>
								</div>
								<div class="media-body">
									<h4 class="media-heading">${module.moduleName }</h4>
									<p>${module.moduleDesc }</p>
									<p>
										<a class="btn btn-default" href="#" role="button">View
											details &raquo;</a>
									</p>
								</div>
							</div>
						</div><!--/.col-xs-6.col-lg-4-->
						
					</c:forEach>
				</div>
				<!--/row-->
			</div><!--/.col-xs-12.col-sm-9-->
			

			<div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar">
			<div class="well header">HotThreads</div>
				<div id="hotThreads" class="list-group">
<!-- 					<a href="#" class="list-group-item active">Link</a> <a href="#"
						class="list-group-item">Link</a> <a href="#"
						class="list-group-item">Link</a> <a href="#"
						class="list-group-item">Link</a> <a href="#"
						class="list-group-item">Link</a> <a href="#"
						class="list-group-item">Link</a> <a href="#"
						class="list-group-item">Link</a> <a href="#"
						class="list-group-item">Link</a> <a href="#"
						class="list-group-item">Link</a> <a href="#"
						class="list-group-item">Link</a> -->
				</div>
			</div><!--/.sidebar-offcanvas-->
						
		</div><!--/row-->		

		<hr>

		<footer>
			<p>&copy; Company 2014</p>
		</footer>

	</div><!--/.container-->
	

	<!-- 	<script type="text/javascript" src="bootstrap/js/jquery.min.js"></script>
	<script type="text/javascript" src="bootstrap/js/bootstrap.js"></script> -->
	<script type="text/javascript" src="js/index.js"></script>
</body>
</html>
